<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        body{
            margin: 0;
        }
        img{
            height: 100%;
            width: 100%;
        }
        .header{
            /*height: 38px;*/
            background-color: #333;

        }
        .container{
            /*background-color:#333;*/
            width:1226px;
            margin: 0 auto;
        }
        .header .menu{
            float:left;
            /*color:white;*/
        }
        .header .login{
            float:right;
            /*color:white;*/
        }
        .header  a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            padding-right:10px;
            text-decoration: none;
        }
        .header a:hover{
            color: white;
        }
        .topbar-download{
            position: relative;

        }
        .topbar-download .appcode{
            position: absolute;
            top: 40px;
            left: 50%;
            width: 90px;
            margin-left: -55px;
            display: none;
        }
        .topbar-download:hover .appcode{
            display:block;
        }

        .sub-header{
            background-color:white;

        }
        .sub-header .ht{
            height: 100px;
            line-height: 100px;
        }
        .sub-header .logo{
            float:left;
            width: 234px;
            /*margin-top: 22px;*/

            /*height: 100px;*/
            /*line-height: 100px;*/
        }
        .sub-header .logo a{
            margin-top:22px;display: inline-block;
        }
        .sub-header .logo a img{
            height: 56px;
            width:56px
        }
        .sub-header .menu-list{
            float:left;
            /*height: 100px;*/
            /*line-height: 100px;*/
            width: 850px;
        }
        .sub-header .menu-list a{
            padding-left: 5px;
            padding-right: 5px;
            font-size: 16px;
            color: #333;
            text-decoration: none;

        }
        .sub-header .menu-list a:hover{
            color: #ff9e80;
        }
        .sub-header .search{
            float:right;
            /*height: 100px;*/
            /*line-height: 100px;*/
        }
        .slider .sd-img {
            height: 460px;
            width: 1226px;
        }
        .news{
            margin-top: 14px;
        }
        .news .channel{
            float: left;
            height: 164px;
            width: 228px;
            background-color: #5f5750;
            padding: 3px;
        }
        .news .channel .item{
            float: left;
            width: 76px;
            height: 82px;
            text-align: center;
        }
        .news .channel .item a{
            display: inline-block;
            padding-top: 18px;
            font-size: 12px;
            text-decoration: none;
            color: #fff;
            opacity:0.7;
        }
        .news .channel .item a:hover{
            opacity:1;
        }
        .news .channel .item img{
            display: block;
            width: 24px;
            height: 24px;
            margin: 0 auto 8px;
        }
        .news .List-item{
            float: left;
            height: 170px;
            width: 316px;
        }
    </style>


</head>
<body>
<div class="header">
    <div class="container">
        <div class="menu">
            <a href="//www.mi.com/" target="_blank">小米官网</a>
            <a href="//www.mi.com/shop" target="_blank">小米商城</a>
            <a href="//hyperos.mi.com" target="_blank">小米澎湃os</a>
            <a href="//www.xiaomiev.com/" target="_blank">小米汽车</a>
            <a href="//i.mi.com/" target="_blank">云服务</a>
            <a href="//iot.mi.com" target="_blank">IoT</a>
            <a href="//youpin.mi.com/" target="_blank">有品</a>
            <a href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
            <a href="//www.mi.com/aptitude/list/?id=88" target="_blank">资质证照</a>
            <a href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
            <a href="//www.mi.com/appdownload/" target="_blank" class="topbar-download">下载app
                <span  class="appcode">
                    <img src="image/download.png"/>
                </span>
            </a>
            <a>select Location</a>
        </div>
        <div class="login">
            <a href="https://account.xiaomi.com/fe/service/login/password?_qrsize=180&sid=mi_eshop&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Forder.mi.com%25252Flogin%25252Fcallback%25253Ffollowup%25253Dhttps%2525253A%2525252F%2525252Fwww.mi.com%2525252Fshop%252526sign%25253DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%25252C%25252C%2526sid%253Dmi_eshop%2526_qrsize%253D180&callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttps%253A%252F%252Fwww.mi.com%252Fshop%26sign%3DODA5NjU3ZjZkYjkxMWE3ZjVkYTE5M2MxMDNlYmJkYzJhZGFjNzBhYg%2C%2C&_sign=yBTYxCh0uB6YSglhQfg4uoP%2BRz4%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=&_locale=zh_CN">登录</a>
            <a href="https://cn.account.xiaomi.com/fe/service/register?_uRegion=CN&_locale=zh_CN&source=&region=CN&sid=mi_eshop&qs=source%3D%26region%3DCN%26sid%3Dmi_eshop%26qs%3Dsid%253Dmi_eshop%26callback%3Dhttps%253A%252F%252Forder.mi.com%252Flogin%252Fcallback%26_locale%3Dzh_CN%26_uRegion%3DCN&callback=https%3A%2F%2Forder.mi.com%2Flogin%2Fcallback">注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <a href="http://www.mi.com/">
                <img src="image/小米图标.png" alt=""/>
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/shop/buy/detail?product_id=20618" target="_blank">Xiaomi手机</a>
            <a href="https://www.mi.com/shop/buy/detail?product_id=20844" target="_blank">REDMI手机</a>
            <a href="https://www.mi.com/shop/buy/detail?product_id=10050050" target="_blank">电视</a>
            <a href="https://www.mi.com/shop/buy/detail?product_id=20864" target="_blank">笔记本</a>
            <a href="https://www.mi.com/shop/buy/detail?product_id=20598" target="_blank">平板</a>
            <a href="https://www.mi.com/shop/buy/detail?product_id=15948" target="_blank">家电</a>
            <a href="https://www.mi.com/xiaomi-ax3000t" target="_blank">路由器</a>
            <a href="https://www.mi.com/service" target="_blank">服务中心</a>
            <a href="https://www.xiaomi.cn/" target="_blank">社区</a>
        </div>
        <div class="ht search">搜索</div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="image/图片2.jpg" alt=""/>
        </div>
    </div>
</div>

<div class="news">
    <div class="container">
        <div class="channel">
            <div class="item">
                <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search">
                    <img src="image/保障服务.png"/>
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://business.qiye.mi.com/">
                    <img src="image/企业团购.png"/>
                    <span>企业团购</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/shop/order/fcode">
                    <img src="image/F码通道.png"/>
                    <span>F码通道</span>
                </a>
            </div>
            <div class="item">
                <a href="https://10046.mi.com/">
                    <img src="image/米粉卡.png"/>
                    <span>米粉卡</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/a/h/16769.html">
                    <img src="image/以旧换新.png"/>
                    <span>以旧换新</span>
                </a>
            </div>
            <div class="item">
                <a href="https://cloud.life.ccb.com/live/phoneRecharge_mobile.jhtml">
                    <img src="image/话费充值.png"/>
                    <span>话费充值</span>
                </a>
            </div>
            <div style="clear: both"></div>
        </div>

        <div class="List-item" style="margin-left: 14px">
            <img src="image/图1.png" />
        </div>
        <div class="List-item" style="margin-left: 15px">
             <img src="image/图2.png" />
        </div>
        <div class="List-item" style="margin-left: 15px">
             <img src="image/图3.png" />
        </div>
        <div style="clear: both"></div>
    </div>
</div>

</body>
</html>